<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='jquery-ui-1.10.3.custom.css' rel='stylesheet' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='../lang/zh-cn.js'></script>
<script>

	$(document).ready(function() {

		$('#calendar').fullCalendar({
			defaultDate: '2015-02-12',
			editable: true,
			weekends: true,		 /*显示周末*/
			fixedWeekCount:true,/*每月显示固定周数*/
			weekNumbers:true,  /*显示第几周*/
			businessHours:true,/*强调显示时间,默认9-4点*/
			contentHeight:500,
			theme:true,        /*jquery ui */
			themeButtonIcons:{prev: 'circle-triangle-w',next: 'circle-triangle-e'},
			eventLimit: true, //控制如果事件太多,显示更多按钮
			eventLimitClick:"popover",
			dayClick: function() {
				alert($(this));
			},
			eventClick: function(event) { 　　　　　　　　//点击事项的方法
					var startD = $.fullCalendar.moment(event.start).format('YYYY-MM-DD HH:mm:ss');
					var endD = $.fullCalendar.moment(event.end).format('YYYY-MM-DD HH:mm:ss');
					alert(startD+" "+event.end+" "+endD);						
                        //TODO      添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
						
                    },
			views: {
				agendaWeek: {
					eventLimit:3 // adjust to 6 only for agendaWeek/agendaDay
				}
			},
			nextDayThreshold:"00:00:00",
			header:{left:'month agendaWeek agendaDay',center:'prevYear title nextYear',right:'prev,today,next'},
			allDayText:"",
			minTime:"00:00:00",
			maxTime:"24:00:00",
			events: [
				{
					title: 'All Day Event',
					start: '2015-02-01'
				},
				{
					title: 'Long Event',
					start: '2015-02-07',
					end: '2015-02-10 01:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2015-02-09T16:00:00'
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: '2015-02-16T16:00:00'
				},
				{
					title: 'Conference',
					start: '2015-02-11',
					end: '2015-02-13'
				},
				{
					title: 'Meeting',
					start: '2015-02-12T10:30:00',
					end: '2015-02-12T12:30:00'
				},
				{
					title: 'Lunch',
					start: '2015-02-12T12:00:00'
				},
				{
					title: 'Meeting',
					start: '2015-02-12T14:30:00'
				},
				{
					title: 'Happy Hour',
					start: '2015-02-12T17:30:00'
				},
				{
					title: 'Dinner',
					start: '2015-02-12T20:00:00'
				},
				{
					title: 'Birthday Party',
					start: '2015-02-13T07:00:00'
				},
				{
					title: 'Click for Google',
					url: 'http://google.com/',
					start: '2015-02-28'
				}
			]
		});
		
	});

</script>
<style>

	body {
		margin: 40px 10px;
		padding: 0;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		font-size: 14px;
	}

	#calendar {
		max-width: 900px;
		margin: 0 auto;
	}

</style>
</head>
<body>

	<div id='calendar'></div>

</body>
</html>
